<template>
  <!-- 同比环比-柱状图 -->
  <div class="barWrapper">

    <!-- 加载中 -->
    <div class="loadDiv"
         v-show="loadShow">
      <a-spin size="large" />
    </div>

    <!-- class="maxHeight300" -->
    <div id="container2"
         :style="{'opacity': data.length > 0 && !loadShow ? '1' : '0'}"></div>

    <!-- 暂无数据 -->
    <noData class="noData"
            :message="message"
            v-show="data === '' && !loadShow" />

  </div>
</template>

<script>
import { Column } from '@antv/g2plot'
import noData from './noData'
import Com from '../../.././common/js/com.js'
import MixinSD from '../../../store/sd/mixinsSd.js'
export default {
  mixins: [MixinSD],
  props: ['ajaxParam', 'scrollTop'], /* ajaxParam: 接口入参参数  scrollTop: 页面滚动值 */
  data () {
    return {
      Eparam: 'PM2.5,PM1,PM10,TSP,AQI',
      category: [],
      date: [],
      data: [],
      oldData: [],
      ajaxData: '',
      wry: '', // 污染源
      dateArr: [],
      dateArr2: [],
      num: 0,
      message: '',
      loadShow: true // 加载中
    }
  },
  created () {
    this.loadShow = true // 加载中
    if (this.ajaxParam.code && this.ajaxParam.code.length !== 0) {
      this.category = this.ajaxParam.category
      this.num = 0
      this.oldData = []
      this.category = this.ajaxParam.category
      this.wry = this.ajaxParam.wry
      this.dateArr = this.ajaxParam.dateArr
      this.dateArr2 = this.ajaxParam.dateArr2
      this.Eparam = this.ajaxParam.Eparam
      const dateArr = this.ajaxParam.dateArr
      this.getHistoryData(this.ajaxParam, this.scrollTop, dateArr[this.num][0][0], dateArr[this.num][0][1])
    } else {
      this.data = ''
      this.message = '请先选择设备1！'
      this.loadShow = false
    }
  },
  methods: {
    initChart: function (ajaxParam, scrollTop) {
      this.loadShow = true // 加载中
      this.num = 0
      this.oldData = []
      this.category = ajaxParam.category
      this.wry = ajaxParam.wry
      this.Eparam = ajaxParam.Eparam
      this.dateArr = ajaxParam.dateArr
      this.dateArr2 = ajaxParam.dateArr2
      if (ajaxParam.code && ajaxParam.code.length !== 0) {
        const dateArr = JSON.parse(JSON.stringify(ajaxParam.dateArr))
        this.getHistoryData(ajaxParam, this.scrollTop, dateArr[this.num][0][0], dateArr[this.num][0][1])
      } else {
        this.data = ''
        this.message = '请先选择设备2！'
        this.loadShow = false
      }
    },
    getHistoryData (ajaxParam, scrollTop, minTime, maxTime, num) { // 获取历史数据
      this.num++
      if (ajaxParam.code === '') {
        this.data = ''
        this.message = '请先选择设备3！'
        this.loadShow = false
      } else {
        var ts = Com.stringTime(new Date())
        var data = {
          account: window.localStorage.getItem('account'),
          codes: ajaxParam.code,
          datetype: 'D',
          max_time: maxTime,
          min_time: minTime,
          params: this.Eparam,
          token: window.localStorage.getItem('token'),
          ts
        }
        const that = this
        this.getHistoryDeviceLogSD(data).then(function (value) {
          const result = value.data.data
          that.ajaxData = result
          that.oldData.push(that.ajaxData)
          if (that.num < 3) {
            const dateArr = that.dateArr
            if (dateArr.length !== 0) {
              that.getHistoryData(that.ajaxParam, that.scrollTop, dateArr[that.num][0][0], dateArr[that.num][0][1])
            }
          } else {
            if (that.oldData.length === 3) {
              const oldDataArr = that.oldData.filter((item) => {
                return item !== '' && item.length !== 0
              })
              if (oldDataArr.length === 0) {
                that.data = ''
                that.message = '暂无数据！'
                that.loadShow = false
              } else {
                const newData = []
                for (let i = 0; i < that.oldData.length; i++) {
                  const oldData = JSON.parse(JSON.stringify(that.oldData[i]))
                  for (var key in oldData) {
                    const json = {}
                    if (oldData[key].length > 0) {
                      let num = 0
                      oldData[key].forEach(item => {
                        const value = item[that.wry] ? Number(item[that.wry]) : 0
                        num = num + Number(value)
                      })
                      json.value = Number((num / oldData[key].length).toFixed(2))
                      json.category = key
                      json.type = that.wry
                      json.date = that.dateArr2[i]
                    } else {
                      json.value = 20 // 测试
                      json.type = that.wry
                      json.category = key
                      json.date = that.dateArr2[i]
                    }
                    newData.push(json)
                  }
                }
                that.data = newData
                that.initChartDom(that.scrollTop)
              }
            }
          }
        })
      }
    },
    initChartDom: function (scrollTop) {
      document.getElementById('bodyWrapperId').scrollTop = scrollTop
      const that = this
      if (this.chart) {
        that.chart.destroy()
        that.createChart()
        that.chart.render()
        that.loadShow = false // 加载中
      } else {
        that.createChart()
        that.chart.render()
        that.loadShow = false // 加载中
      }
    },
    createChart: function () {
      const data = this.data
      const minValue = Math.min(...data.map((d) => d.value)) // 获取最小值
      this.chart = new Column('container2', {
        data,
        isGroup: true,
        color: ['rgba(91,143,249,0.85)', 'rgba(90,216,166,0.85)', 'rgba(93,112,146,0.85)'], /** 自定义颜色 */
        xField: 'category',
        yField: 'value',
        seriesField: 'date',
        appendPadding: [0, 40, 0, 0],
        minColumnWidth: 20,
        maxColumnWidth: 60,
        tickInterval: 0, // 坐标轴刻度间隔
        subTickLine: { // 坐标轴刻度线线的配置项，null 表示不展示
          stroke: 'red',
          lineWidth: 2
        },
        line: {
          lineWidth: 2, // 设置线的宽度
          stroke: 'red', // 设置线的颜色
          lineDash: [3, 3] // 设置虚线样式
        },
        // columnWidthRatio: 0.5, // 柱状图宽度占比 [0-1]
        marginRatio: 0.2, /** 设置间距 */
        label: { // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'middle', 'bottom'
          layout: [ // 可配置附加的布局方法
            { type: 'interval-adjust-position' }, // 柱形图数据标签位置自动调整
            { type: 'interval-hide-overlap' }, // 数据标签防遮挡

            { type: 'adjust-color' } // 数据标签文颜色自动调整
          ],
          style: {
            fontSize: 0
          }
        },
        legend: { // 图例
          position: 'top-right',
          itemName: { // 图例项文本的配置
            style: {
              fill: '#8c8c8c'
            }
          }
        },
        tooltip: {
          enterable: true,
          showMarkers: false,
          showCrosshairs: false,
          showContent: true // 是否展示 tooltip 内容框
        },
        xAxis: {
          line: { // 坐标轴线
            style: {
              stroke: 'rgba(0,0,0,0.15)',
              lineWidth: 1
            }
          },
          label: {
            style: {
              fontSize: 11,
              fill: 'rgba(0,0,0,0.45)'
            }
          },
          tickLine: { // 坐标轴刻度线
            style: {
              lineWidth: 0
            }
          }
        },
        yAxis: {
          line: { // 坐标轴线
            style: {
              stroke: 'rgba(0,0,0,0.15)',
              lineWidth: 1
            }
          },
          label: {
            style: {
              fontSize: 11,
              fill: 'rgba(0,0,0,0.45)'
            }
          }
        },
        annotations: [
          { // 最小值圆形
            type: 'html',
            position: ['start', minValue],
            html: '<div class="chartIcon1 chartIcon1B"></div>',
            offsetY: 0 // -10
          },
          { // 最小值三角
            type: 'html',
            position: ['end', minValue],
            html: '<div class="chartIcon3 chartIcon3B"></div>',
            offsetY: 0 // -10
          },
          { // 最小值线
            type: 'line',
            start: ['start', minValue], /** 起始位置 */
            end: ['end', minValue], /** 结束位置 */
            offsetY: 0, // -10
            text: {
              content: minValue,
              position: 'right',
              offsetY: 7,
              offsetX: 40,
              style: {
                textAlign: 'right',
                fill: '#B16FEF'
              }
            },
            style: {
              stroke: '#B16FEF',
              lineDash: [4, 3],
              lineWidth: 2
            }
          }
        ]
      })
    }
  },
  components: {
    noData
  }
}
</script>

<style lang="less" scoped>
.barWrapper {
  //   padding: 0 0.24rem 0.24rem 0.24rem;
  position: relative;
  padding-bottom: 0.24rem;
  margin: 0 0.24rem;
  height: 3.6rem;
  width: calc(100% - 0.48rem);
  .loadDiv {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    padding-top: 6%;
  }
  #container2 {
    width: 100%;
    min-width: 100%;
    height: calc(3.6rem - 0.24rem);
  }
  .noData {
    position: absolute;
    top: 0;
  }
}
</style>
